<%@page import="com.hrms.domain.Task"%>
<%@page import="com.hrms.core.Route"%>
<%@page import="com.hrms.core.Constants"%>
<%@page import="com.hrms.core.Utils"%>
<%@page import="com.hrms.domain.BusinessObjectImpl"%>
<%@page import="org.apache.commons.lang.StringUtils"%>
<%@page import="com.hrms.domain.MyDashboard"%>
<%@page import="com.hrms.domain.Employee"%>
<%@page import="com.hrms.view.TeamDashboardView"%>
<%@page import="java.util.List"%>
<%@ taglib prefix="c" tagdir="/WEB-INF/tags"%>
<%  
	TeamDashboardView teamDashboardView = new TeamDashboardView();
	teamDashboardView.service(request, response);
	
  	final boolean isSuper = teamDashboardView.isSuper();
  	//team members
    List<Employee> empList = teamDashboardView.getTeamMembers();
  	
	final String Id = teamDashboardView.getUserId();
	Employee emp = teamDashboardView.getViewingUser();
  //using memcache to cover adhoc visits to Mydashboard utilization
 	 MyDashboard mydashboard = teamDashboardView.getRequestedDashboard();
  
  	final String viewingUserAlias = teamDashboardView.getViewingUserAlias();
  	
  	final boolean isTeam = teamDashboardView.isTeam();
  
    %>
<html>
<head>
<title>Team Dashboard</title>
<style>
body
{font-family: Verdana,Arial,sans-serif; font-size: 11px;
}

.divHeaderTable
{
            width: 100%;
            padding-bottom:5px;
            display:block;
}
.divHeaderRow
{
            width: 100%; /* add extra that you want to for header column */
            display:block;
            height:105px;
}
.divHeaderColumn
{
            float: left;
            width: 33%;
            display:block;
}
.divTable
{
            width: 100%;
            display:block;
            padding-top:10px;
            padding-bottom:10px;
            padding-right:10px;
            padding-left:10px;            
}
.divRow
{
         width: 96%;          
         display:block;
         padding-bottom:10px;
         padding-top:10px;
         padding-left: 1%;
         padding-right: 1%;
         overflow: auto;
}
.divColumn
{
         float: left;
         display:block;
}
.divColumn2
{
         float: right;
         display:block;
}
.dbfieldLabel {
font-size: 12px;
line-height: .8em;
color: #00339A;
font-family:'lucida grande', tahoma, verdana, arial, sans-serif;  
}
.cards{ margin-left: 2%; margin-right: 2%; margin-top: 0; margin-bottom: 0; padding-top: 0px; padding-bottom: 0px;}
.timestamps{ font-family: "Helvetica Neue",Arial,Helvetica,'Liberation Sans',FreeSans,sans-serif; color: #999; font-size: 9px; margin-bottom: 2px; text-align: left;}
</style>
<script type="text/javascript">
var stringFields = new Array();
var dateFields = new Array();
var intFields = new Array();
var timeFields = new Array();
var emailFields = new Array();
var doubleFields = new Array();

function clearValidationRules(){
	inATask=false;
	stringFields = new Array();
	dateFields = new Array();
	intFields = new Array();
	timeFields = new Array();
	emailFields = new Array();
	doubleFields = new Array();
}

var SELECTED_EMPLOYEE_REF = '<%= Constants.SELECTED_EMPLOYEE %>';

var SELECT_TYPE = '<%=  Utils.makeSelect("type", Constants.TASK_TYPE.values(), Constants.EMPTY_STRING)  %>';
<%-- var SELECT_STATUS ='<%=  Utils.makeSelect("status", Constants.Status.values(), Constants.EMPTY_STRING)  %>'; --%>

var ACTION_EVENT = '<%= com.hrms.core.Constants.ACTION %>';
var EVENT_NEW = '<%=Constants.Action.NEW.toString() %>';
var EVENT_EDIT = '<%=Constants.Action.EDIT.toString() %>';
var EVENT_TASK_CHANGE = '<%=Constants.Action.TASKCHANGE.toString() %>';
var EVENT_BATCH_EDIT = '<%=Constants.Action.BATCH_EDIT.toString() %>';

var maskedId = "";
var targetURI="";
var targetViewr="";
var targetViewrTitle="";

function setUserAction(userAction){
	$('#'+ACTION_EVENT).val(userAction);
}

function maskDivForLoading(theDiv){
	maskedId = '#'+theDiv;  
	$(maskedId).block({ 
        message: '<b>Loading....</b>', 
        overlayCSS: { backgroundColor: '#EEE' },
        centerY: false, 
        css: {
        	top: '10px', left: '', right: '10px',
            border: 'none', 
            padding: '0px', 
            backgroundColor: 'transparent', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .9, 
            color: 'black' 
        }
        
    });
   // $(maskedId).growlUI('Growl Notification', 'Have a nice day!'); 
}
function unMaskDivForLoading(){
    $(maskedId).unblock();     
    clearValidationRules();
    setMsg('');
}


function loadContent(uri, params, targetId, title){
		maskDivForLoading( targetId );
		setPanelTitle(title);
		targetURI = uri;
		targetViewr = targetId;
		targetViewrTitle = title; 
			
		//alert(uri+'?'+getParamAsUrlRewrite(SELECTED_EMPLOYEE_REF)+'&'+params);
		$.post(uri+'?'+getParamAsUrlRewrite(SELECTED_EMPLOYEE_REF), params, function(htmlresponse) {	
			 $(maskedId).html(htmlresponse);
				unMaskDivForLoading(); 
			});
}

function setPanelTitle(title){
	$('#panelTitle').text(title);
}

function setEmpId(empId){
	$( '#'+SELECTED_EMPLOYEE_REF ).val(empId);
	$('#serviceForm').submit();
	//window.location.reload();
}

function getParamAsUrlRewrite(paramName){
	return paramName+'='+ $('#'+paramName).val();
}

function reloadForEmployee(params){	
	loadContent(targetURI, params , targetViewr, targetViewrTitle);
	clearValidationRules();
	//$('#target').submit();
}

var inATask=false;

function addNewRow(boType){
	
	if(!inATask){
	inATask=true;
		
	//alert(boType);
	var taskTable = document.getElementById(boType);	
	var rowCount = taskTable.rows.length;
		
	var row = taskTable.insertRow(1);
	row.className = "ui-state-highlight ui-corner-all";
	makeRowsForBo(boType, row);
	}
}

function saveItem(boType){
	/*alert(boType);*/
	/*alert($("#Form"+ boType ).serialize());
	alert(validInputs());*/
	if(validInputs()){
		reloadForEmployee($("#Form"+ boType ).serialize());
	}
	
}

function updateUtilization(utilisationValue){
	$.get('/home/utilization.jsp?'+getParamAsUrlRewrite(SELECTED_EMPLOYEE_REF)+'&utilization='+utilisationValue, function(data) {
		 $.blockUI({ 
	            message: data, 
	            fadeIn: 700, 
	            fadeOut: 700, 
	            timeout: 2000, 
	            showOverlay: false, 
	            centerY: false, 
	            css: { 
	                width: '350px', 
	                top: '10px', 
	                left: '10px', 
	                right: '', 
	                border: 'none', 
	                padding: '5px', 
	                backgroundColor: '#000', 
	                '-webkit-border-radius': '10px', 
	                '-moz-border-radius': '10px', 
	                opacity: .6, 
	                color: '#fff' 
	            } 
	        }); 
		 
		/*	setMsg(data);
		 setTimeout("setMsg('')", 2000); */
	 }); 
}
</script>
<script type="text/javascript">
try{
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-23294900-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
}catch(p){}
</script>
</head>
<body>
<%@include file="/WEB-INF/include/IEbrowserWarning.jsp" %>
<%@include file="/WEB-INF/include/msg.jsp" %>
<form id="serviceForm" name="serviceForm" method="post" action="<%= Constants.ROOT %>">
<%@include file="/WEB-INF/include/userAction.jsp" %>
	<input type="hidden" id="<%= Constants.SELECTED_EMPLOYEE %>" name="<%= Constants.SELECTED_EMPLOYEE %>" value="<%= Id %>">
	<input type="hidden" id="<%= Constants.ACTIVE_INDEX %>" name="<%= Constants.ACTIVE_INDEX %>" >
</form>
<div class="divTable"> 
  <div class="divRow"> 
    <div class="divColumn" style="width: 17%"> 
      <%
			 		for(Employee e : empList){ %>
      <c:icon key="<%= e.getUserId() %>"
			name="<%= Utils.escapeHTML(e.getName()) %>"
			intials="<%= e.getInitials() %>"
			selected="<%= String.valueOf( Id.equals(e.getUserId()) )%>"
			utilization="<%= MyDashboard.getFormattedUtilizationForUser(e.getUserId()) %>"></c:icon> 
      <%
					}
			 		%>
    </div>
    <div class="divColumn" style="width: 8%"> &nbsp</div>
    <div class="divColumn"> 
      <h3 class="pagetitle"><%= emp.getName() %></h3>
      <% if(!isTeam){ %>
      <div>
      	<a href="https://jira.tradecard.com/secure/ViewProfile.jspa?name=<%=viewingUserAlias%>">
      		<img alt="Jira Recent Activity" src="/static/images/tools/jira.png" height="15px" title="Jira Recent Activity">
      	</a>
      	<a href="https://fisheye.tradecard.com/user/<%=viewingUserAlias%>">
      		<img alt="Fisheye Recent Activity" src="/static/images/tools/fisheye.jpg"  height="15px"  title="Fisheye Recent Activity" >
      	</a>
      </div>
      <%} %>
    </div>
    <div class="divColumn" style="width: 2%"> &nbsp</div>
    <div class="divColumn"> 
    <span id="stars-cap" class="datafieldlabel" style="display: block;"></span> 
      <div id="stars-wrapper2"> 
        <select name="utilization">
          <option value="1">Not Much</option>
          <option value="2">Not that bad</option>
          <option value="3">Average</option>
          <option value="4">Fully Utilized</option>
          <option value="5">Over Utilized</option>
        </select>
      </div>
    </div>
    <div class="divColumn" style="width: 10%"> &nbsp</div>
    <div class="divColumn" style="width: 40%;"> 
      <form style="text-align: right;">
        <div id="radioset" class="ui-buttonset"> 
          <% 
          		int r=0;
					for( Route route : Constants.TEAM_ROUTES ){
						r++;
				%>
          <input type="radio" id="radio<%=r %>" name="radioRoute" class="ui-helper-hidden-accessible" <%= r == 1 ? "checked='checked'" : Constants.EMPTY_STRING %>>
          <label for="radio<%=r %>" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"> 
          <span class="ui-button-text"><%= route.getName() %></span> </label>
          <script type="text/javascript">
				$('#radio<%=r %>').click(function(){
			   			loadContent('<%= route.getPage() %>', '', 'CategoryContentView', '<%= route.getName() %>');
				});
						</script>
          <%	}
				%>
        </div>
      </form>
    </div>
  </div>
  <hr>
  <div class="divRow"> 
    <div id="workTypeAccordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons" role="tablist" style="overflow: auto; min-height: 500px;"> 
      <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span> 
        <span class="ui-icon ui-icon-triangle-1-s"></span><a href="#" id="panelTitle"></a></h3>
      <div id="CategoryContentView" class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="display: block; overflow: auto;" role="tabpanel">
       
      </div>
    </div>
  </div>
</div>
</body>
<script type="text/javascript">
	$(document).ready(function(){
		
		$(function() {
			$('#radioset').buttonset();
		});
		$('#radio1').click(); 
				
		 $("#stars-wrapper2").stars({
			    inputType: "select",
			    captionEl: $("#stars-cap"), <% if(!isSuper){%> disabled: true, <% }%>
			    callback: function(ui, type, value, event){	
			    	updateUtilization(value);
			    }
			});
		 
		<%if( ( mydashboard != null) && (mydashboard.getUtilization()!=null)) {%>
		$("#stars-wrapper2").stars("selectID", <%=  mydashboard.getUtilization().getRating() -1  %>);
		<% }%>
		
	});
</script>
</html>
